/** * 组件-系统Logo * **/
<template>
  <div class="layout-logo">
    <img
      v-if="!config.layout.menuCollapse"
      class="logo-img"
      src="../assets/img.png"
      alt="logo"
    />
    <div v-if="!config.layout.menuCollapse" class="website-name">logo</div>
    <el-icon
      v-if="config.layout.layoutMode"
      @click="onMenuCollapse"
      size="{{sizes.value}}"
    >
      <Expand v-if="config.layout.menuCollapse" />
      <Fold v-else />
    </el-icon>
  </div>
</template>

<script lang="ts" setup>
import { useConfig } from "../stores/config";

import { fontSizes } from "../utils/util";
const sizes = ref(fontSizes(20));
const config = useConfig();
// 展开/收缩
const onMenuCollapse = () => {
  config.setLayout("menuCollapse", !config.layout.menuCollapse);
};
function init() {
  console.log('sizes=====', sizes)
}
init();
</script>

<style scoped lang="less">
/* // logo布局 */
.layout-logo {
  width: 100%;
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.1rem;
  color: #409eff;

  .logo-img {
    width: 0.28rem;
  }

  .website-name {
    display: block;
    width: 1.8rem;
    padding-left: 0.04rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.2rem;
  }
}
</style>
